<div>
    <el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  title="绘制热区" width="750px" class="dialogStyleBase" :visible.sync="showSelect" :before-close="closeBox"
         append-to-body>
        <div class="warp">
            <div class="left-hot">
                <div class="img-box">
                    <!-- <img :src="imgUrl" alt="" onload> -->
                    <imageBox :src="imgUrl" @onLoad="imgOnLoad"></imageBox>
                    <div class="dragResizeWrap" v-if="loadingSuccess">
                        <DragResize :isActive="true" :parentLimitation="true" :w="item.dragResizeVal.width"
                            :h="item.dragResizeVal.height" :x="item.dragResizeVal.left" :y="item.dragResizeVal.top"
                            v-for="(item,index) of hotList" :key="index" :minw="20" :minh="20"
                            @dragstop="($event) =>{setVal($event,index)}"
                            @resizestop="($event) =>{setVal($event,index)}">
                            <div class="resize-main">
                                <span class="rank">{{index + 1}}</span>
                            </div>
                        </DragResize>
                    </div>
                </div>
            </div>
            <div class="right-link">
                <div class="linkList">
                    <Draggable class="ul" :list="hotList" :animation="400">
                        <div class="link-item" v-for="(item2,index2) of hotList" :key="index">
                            <div class="left">
                                <span style="margin-right: 5px;">{{index2 + 1}}</span>
                            </div>
                            <div class="center">
                                <SelectLink :appWindow="appWindow" v-model="item2.linkPath"  ></SelectLink>
                            </div>
                            <div class="right">
                                <span class="delete" @click="deleteHot(index2)"><i class="el-icon-delete"></i></span>
                            </div>
                        </div>
                    </Draggable>
                </div>
                <div class="link-footer">
                    <div :class="{shadow:showBtnShadow,btn:true}" @click="addHotspot">
                        <i class="iconfont icon-but-plus"></i>添加热区
                    </div>
                </div>
            </div>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-row>
                <el-col :span="12" style="text-align: left;">
                    已选择{{hotList.length || 0}}个热区
                </el-col>
                <el-col :span="12">
                    <el-button @click="showSelect = false">取 消</el-button>
                    <el-button type="primary" @click="confirmHot">确 定</el-button>
                </el-col>
            </el-row>
        </div>
    </el-dialog>



</div>